<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="root">

        <button v-on:click="showInfo1">点我提示信息1</button>
        <!-- 第2种简写写法，并且都可以给绑定的方法传参数多个, 元素本身(必须叫event)和参数 -->
        <!-- v-on:click="showInfo2" 等于是 @click="showInfo2($event) -->
        <button @click="showInfo2($event, 66)">点我提示信息2</button>

        <br>

        <!-- 事件修饰符 -->
        <!-- prevent：阻止默认事件
        stop：阻止事件冒泡
        once：事件只会触发一次 -->
        <a href="https://www.baidu.com/index.htm" @click.prevent="showInfo3">阻止默认事件测试</a>

        <div @click="showInfo3">
            <!-- 不加.stop的话，会冒泡到外面的div上面，会触发两次showInfo3方法 -->
            <button @click.stop="showInfo3">阻止冒泡测试</button>
        </div>

        <button @click.once="showInfo3">事件只会触发一次测试</button>

        <!-- 事件修饰符可以链式写法写多个 -->
        <a href="https://www.baidu.com/index.htm" @click.once.prevent="showInfo3">阻止默认事件测试</a>

    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            
        },
        methods: {
            // 绑定事件的回调，必须写在methods里面
            // methods 里面的函数，都是被 VM 管理的
            showInfo1(e) {
                console.log(e.target.innerText)
                // 这个this是vue实例vm
                console.log(this)
            },
            showInfo2(e, num) {
                // 接收的参数
                console.log(num)
                // 标签元素本身
                console.log(e.target.innerText)
                // 这个this是vue实例vm
                console.log(this)
            },
            showInfo3() {
                alert('事件修饰符')
            },

        }
    })
</script>

</html>